import bulletinUserPageApi from '@/api/bulletin/bulletinUserPageApi'
import CSearchForm from '@/components/CSearchForm/CSearchForm'
import CTable from '@/components/CTable/CTable'
import IBulletinUserPageForm from '@/model/form/bulletin/IBulletinUserPageForm'
import IBulletinUserPageVO from '@/model/vo/bulletin/IBulletinUserPageVO'
import { getBulletinFormSelectData } from '@/page/sys/Bulletin/BulletinFormItem'
import { dateFormat } from '@/util/DateUtil'
import { updateTimeOrder } from '@/util/http'
import { IconRefresh, IconSearch } from '@douyinfe/semi-icons'
import { Badge, Button, ButtonGroup, Space } from '@douyinfe/semi-ui'
import { ChangeInfoSorter } from '@douyinfe/semi-ui/lib/es/table'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import BulletinColumns from './BulletinColumns'
import BulletinSearchFormItem from './BulletinSearchFormItem'

export default function Bulletin() {
  const [loading, setLoading] = useState(false)
  const [dataSource, setDataSource] = useState<IBulletinUserPageVO[]>([])
  const [sideSheetVisible, setSideSheetVisible] = useState(false) // 搜索 sideSheet是否显示
  const [searchForm, setSearchForm] = useState<IBulletinUserPageForm>({}) // 搜索表单初始值

  const [total, setTotal] = useState(0)
  const [pageNum, setPageNum] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [sorter, setSorter] = useState<ChangeInfoSorter<any>>()

  // 执行获取 table数据
  function doGetTableData() {
    getTableData(
      setDataSource,
      setLoading,
      searchForm,
      pageNum,
      pageSize,
      setTotal,
      sorter
    )
  }

  const { dictList } = getBulletinFormSelectData(sideSheetVisible)

  useEffect(() => {
    doGetTableData()
  }, [])

  return (
    <div className="p-l-r-20">
      <CSearchForm
        sideSheetVisible={sideSheetVisible}
        setSideSheetVisible={setSideSheetVisible}
        getTableData={(values: any) => {
          setPageNum(1) // 这里的值不会立即生效
          setPageSize(10) // 这里的值不会立即生效
          getTableData(
            setDataSource,
            setLoading,
            values,
            1,
            10,
            setTotal,
            sorter
          )
        }}
        setSearchForm={setSearchForm}
        width={410}
      >
        <BulletinSearchFormItem dictList={dictList}></BulletinSearchFormItem>
      </CSearchForm>

      <div className="flex jc-sb m-t-b-10">
        <Space></Space>

        {/* @ts-ignore */}
        <ButtonGroup>
          <Button
            onClick={() => {
              setSideSheetVisible(true)
            }}
            icon={
              <Badge dot={Object.keys(searchForm).length !== 0} type="warning">
                <IconSearch title="搜索" className="flex ai-c" />
              </Badge>
            }
          ></Button>
          <Button
            onClick={() => {
              if (!loading) {
                doGetTableData()
              }
            }}
            disabled={loading}
            icon={<IconRefresh spin={loading} title="刷新" />}
          ></Button>
        </ButtonGroup>
      </div>

      <CTable<IBulletinUserPageVO>
        onChange={({ sorter }) => {
          setSorter(sorter)
          getTableData(
            setDataSource,
            setLoading,
            searchForm,
            pageNum,
            pageSize,
            setTotal,
            sorter
          )
        }}
        columns={BulletinColumns(dictList)}
        dataSource={dataSource}
        loading={loading}
        pagination={{
          total,
          currentPage: pageNum,
          pageSize,
          onChange: (currentPage: number, pageSize: number) => {
            setPageNum(currentPage) // 这里的值不会立即生效
            setPageSize(pageSize) // 这里的值不会立即生效
            getTableData(
              setDataSource,
              setLoading,
              searchForm,
              currentPage,
              pageSize,
              setTotal,
              sorter
            )
          },
          showSizeChanger: true,
        }}
      ></CTable>
    </div>
  )
}

// 获取 table数据
function getTableData(
  setDataSource: Dispatch<SetStateAction<IBulletinUserPageVO[]>>,
  setLoading: Dispatch<SetStateAction<boolean>>,
  searchForm: IBulletinUserPageForm,
  pageNum: number,
  pageSize: number,
  setTotal: Dispatch<SetStateAction<number>>,
  sorter: ChangeInfoSorter<any> | undefined
) {
  setLoading(true)
  bulletinUserPageApi({
    ...searchForm,
    stBeginTime:
      searchForm.sendTimeList && searchForm.sendTimeList.length
        ? dateFormat(searchForm.sendTimeList[0])
        : undefined,
    stEndTime:
      searchForm.sendTimeList && searchForm.sendTimeList.length
        ? dateFormat(searchForm.sendTimeList[1])
        : undefined,
    pageNum,
    pageSize,
    orderList: sorter?.sortOrder
      ? [{ name: sorter.dataIndex, value: sorter.sortOrder }, updateTimeOrder]
      : [updateTimeOrder],
  })
    .then(({ data }) => {
      setDataSource(data.data.records)
      setTotal(data.data.total)
      setLoading(false)
    })
    .catch(() => {
      setLoading(false)
    })
}
